<template>
	<view class="article-wrapper">
		<custom-header-bar :title="title" backStatus="1"></custom-header-bar>
		<div class="content-box">
			<div class="article" v-html="agreementName"></div>
			<div class="submit-wrapepr" v-if="page==='register'">
				<button class="button active" @click="agree" type="default">同意用户协议和隐私政策</button>
			</div>
		</div>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js"
	import CustomHeaderBar from "@/components/custom-header-bar.vue"
	import {
		userAgreement
	} from "@/api/login.js";
	export default {
		components: {
			CustomHeaderBar
		},
		data() {
			return {
				type: '',
				page: '',
				title: '',
				agreementName: ''
			}
		},
		onLoad(options) {
			this.type = options.type
			if (options.type === 'yhxy') {
				this.title = "用户协议"
			}
			if (options.type === 'yszc') {
				this.title = "隐私政策"
			}
			this.page = options.page
			this.getUserAgreement()
		},
		methods: {
			agree() {
				storage.setXyAgree(true)
				uni.navigateBack()
			},
			getUserAgreement() {
				userAgreement().then(res => {
          console.log('协议',res)
					if (res.data.code == 200) {

						let list = res.data.data
						let article = []
						article = list.filter((item) => {
							return item.remark === this.title
						})
						if (article.length === 1) {
							this.agreementName = article[0].agreementName
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/utils/variable.scss';

	.article-wrapper {
		height: 100%;
		background: linear-gradient(-36deg, rgba(129, 216, 207, 0.73), rgba(100, 201, 191, 0.73));
		padding: 160upx 50upx 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.content-box {
			height: calc(100vh - 200upx);
			background-color: rgba(255, 255, 255, .65);
			border-radius: 24upx;
			padding: 48upx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;

			.article {
				flex: 1;
				overflow-y: auto;
			}
		}

		.submit-wrapepr {
			margin-top: 35upx;

			.button {
				color: rgba(186, 193, 192, 1);
				background: rgba(219, 231, 230, 1);
				letter-spacing: 8upx;
				height: 84upx;
				line-height: 84upx;
				font-size: 32upx;

				&.active {
					color: #ffffff;
					background: linear-gradient(-36deg, rgba(114, 215, 204, 0.6), rgba(40, 207, 179, 0.6));
					box-shadow: 0upx 7upx 14upx 1upx rgba(129, 216, 207, 0.41);
					border-radius: 18upx;
				}

				&:after {
					border: none
				}
			}
		}
	}
</style>
